<template>
  <header-comp></header-comp>
  <footer-comp></footer-comp>
  <div id="management">
    <h2 style="color: white">查询模式选择</h2>
    <ul class="tree" v-for="item in queryItems" :key="item.id">
      <li class="tree-item">
        <div class="icon">{{ item.icon }}</div>
        <span
          class="label"
          :class="{ active: item.active }"
          @click="chooseQueryItem(item)"
          >{{ item.title }}</span
        >
      </li>
    </ul>
    <!-- 路径规划面板 -->
    <RouteDesign v-if="isShow" />

    <!-- 站控设施面板 -->
    <div class="menu">
      <div class="menu-item">
        <h3 style="margin-right: 20px">图标</h3>
        <h3>站控措施</h3>
      </div>
      <div
        class="menu-item"
        v-for="station in station_solutions"
        :key="station.id"
      >
        <div class="icon2" :class="['iconfont', station.iconName]"></div>
        <div class="connecting-line"></div>
        <div class="item-text">{{ station.title }}</div>
      </div>
    </div>
  </div>
  <!-- 站点查询 -->
   <station-query v-if="!isShow"/>
   
</template>

<script setup>
import HeaderComp from "@/components/HeaderComp.vue";
import FooterComp from "@/components/FooterComp.vue";
import RouteDesign from "@/views/management/RouteDesign.vue";
import StationQuery from "./StationQuery.vue";
import { renderHeat } from "@/cesiumTools/heatMap";
import { useLineData } from "@/store";
import { useMeasureData } from "@/store/measureData";
import { station_solutions } from "@/store/staticData";
import { ref, onMounted, onBeforeUnmount } from "vue";

const subLineData = ref([]);
const viewer = ref(null);
const lineDataStore = useLineData();
const measureDataStore = useMeasureData();
let isShow = ref(false);
onMounted(async () => {
  subLineData.value = lineDataStore.allData;
  viewer.value = lineDataStore.viewer;
});

// 组件销毁时清除数据
onBeforeUnmount(async () => {
  await measureDataStore.clearData();
});
let removeHeat;
const queryItems = ref([
  { id: 1, title: "站点拥挤度", active: false, icon: "📍" },
  { id: 2, title: "周边查询", active: false, icon: "📡" },
  { id: 3, title: "路径规划", active: false, icon: "🗺️" },
  { id: 4, title: "站控设施", active: false, icon: "💻" },
]);
const queryWay = ref("站点拥挤度");

// 点击查询方式，改变查询的数据以及效果
const chooseQueryItem = (item) => {
  removeHeat && removeHeat();
  // 处理地图效果
  handleEffect(item.title);
  // 处理ui
  queryItems.value = queryItems.value.map((n) => {
    if (n.id === item.id) {
      n.active = true;
      queryWay.value = item.title;
    } else {
      n.active = false;
    }
    return n;
  });
  // renderClowed();
};

// 根据查询方式处理效果
const handleEffect = async (title) => {
  if (title === "站点拥挤度") {
    await measureDataStore.clearData();
    isShow.value = false;
    renderClowed();
  } else if (title === "周边查询") {
    // 处理周边查询
    isShow.value = false;
    await measureDataStore.clearData();
  } else if (title === "路径规划") {
    await measureDataStore.clearData();
    isShow.value = !isShow.value;
  } else if (title === "站控设施") {
    isShow.value = false;
    // 处理站控设施
    renderStationMeasure();
  }
};

// 站点拥挤度逻辑,点击展示热力图，表现各个站点的拥挤程度
const renderClowed = () => {
  // 解析线路拥挤度数据
  const dataSource = [];
  // 清除当前底图，然后添加arcgis底图
  subLineData.value.forEach((item) => {
    const { stationsList } = item;
    stationsList.forEach((s) => {
      const { position } = s;
      dataSource.push({
        x: position.lng,
        y: position.lat,
        value: Math.ceil(Math.random() * 1000),
      });
    });
  });
  removeHeat = renderHeat(viewer.value, dataSource);
};

// 渲染站控措施
const renderStationMeasure = () => {
  function getRandomIntInclusive(min, max) {
    min = Math.ceil(min);
    max = Math.floor(max);
    return Math.floor(Math.random() * (max - min + 1)) + min; //含最大值，含最小值
  }

  // 从数组中随机取几个数
  const getRandomArrayValue = (arr, num) => {
    var sData = arr.slice(0),
      i = arr.length,
      min = i - num,
      item,
      index;
    while (i-- > min) {
      index = Math.floor((i + 1) * Math.random());
      item = sData[index];
      sData[index] = sData[i];
      sData[i] = item;
    }
    return sData.slice(min);
  };

  const resultData = [];
  lineDataStore.allData.forEach((item) => {
    const { stationsList, color } = item;
    const result = stationsList.map((s) => {
      // 0-5个站控措施
      const measureNum = getRandomIntInclusive(0, 5);
      let measures = getRandomArrayValue(station_solutions, measureNum);
      s.measures = measures;
      s.color = color;
      return {
        name: s.name,
        measures,
      };
    });
    // console.log(result)
    resultData.push(result);
  });
  // 全局共享站控措施数据
  measureDataStore.setData(resultData);
};
// renderClowed()
</script>

<style scoped>
#management {
  position: absolute;
  top: 6%;
  left: 2%;
}
.tree {
  list-style-type: none;
  padding-left: 20px;
}
.tree-item {
  margin: 10px 0;
  position: relative;
  display: flex;
  align-items: center;
}
.tree-item::before {
  content: "";
  position: absolute;
  top: 15px;
  left: -20px;
  border-left: 2px solid #1cd0e0;
  height: 100%;
}
.tree-item::after {
  content: "";
  position: absolute;
  top: 15px;
  left: -20px;
  border-top: 2px solid #1cd0e0;
  width: 20px;
}
.label {
  display: inline-block;
  background-color: rgba(28, 208, 224, 0.3);
  color: #ffffff;
  padding: 5px 15px;
  margin-left: 5px;
  border-radius: 5px;
  text-shadow: 1px 1px 2px #000;
  cursor: pointer;
}
.icon {
  width: 30px;
  height: 30px;
  background-color: rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  margin-right: 10px;
}
.active {
  background-color: #1cd0e0;
}

.menu {
  /* background-color: rgba(0, 0, 0, 0.5); */
  padding: 10px;
  border-radius: 5px;
  position: absolute;
  left: 937%;
  top: -10%;
  color: #ffffff;
}
.menu-item {
  position: relative;
  width: 217px;
  display: flex;
  align-items: center;
  margin-bottom: 5px;
}
.menu-item:last-child {
  margin-bottom: 0;
}
.icon2 {
  width: 30px;
  height: 30px;
  background-color: rgba(28, 208, 224, 0.3);
  border-radius: 5px;
  margin-right: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.item-text {
  background-color: rgba(28, 208, 224, 0.3);
  padding: 5px 10px;
  border-radius: 5px;
  width: fit-content;
}
.connecting-line {
  position: absolute;
  width: 24px;
  height: 2px;
  background-color: rgba(28, 208, 224, 0.3);
  left: 30px;
  /* 与 icon 的位置一致 */
  /* height: calc(100% - 10px); */
  /* 减去上下的间距 */
  top: 15px;
  z-index: 1; /* 调整图层顺序，使其在后面 */
}
.menu-item:not(:last-child) .connecting-line {
  height: 3px; /* 设置中间连接线高度 */
  top: 13px; /* 根据需要微调线的位置 */
}
</style>
